<template>
  <div class="app">
    <h4 class="headline">欢迎光临水果店</h4>
    <table border="1px" cellpadding="1px" cellspacing="0">
      <tr>
        <td>苹果10块/斤,折扣,8折</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input v-model="quantity" type="text" /></td>
      </tr>
      <tr>
        <td><button @click="settleAccounts">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价{{ total }} 折扣后:{{ discount }} 省了:{{ province }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "VueJobApp",

  data() {
    return {
      quantity: 0,
      total: 0,
      discount: 0,
      province: 0,
    };
  },

  mounted() {},

  methods: {
    settleAccounts() {
      this.total = (this.quantity * 10).toFixed(2);
      this.discount = (this.total * 0.8).toFixed(2);
      this.province = (this.total - this.discount).toFixed(2);
    },
  },
};
</script>

<style lang="css" scoped>
.app {
  text-align: center;
}
.headline {
  text-align: center;
}
table {
  margin: 0 auto;
  text-align: center;
  width: 800px;
  height: 200px;
}
</style>
